<template>
  <div class="container">
    <nav-bar
      :title="state.titleObj[orgStartType]"
      isCustomLeftBtn
      isRightIcon
      @leftClick="back"
      @rightBtn="searchBtn"
    ></nav-bar>
    <div class="list-box">
      <div class="title-box">
        <div class="column-first">证书名称</div>
        <div class="column-second">证书到期日期</div>
        <div class="column-third">操作</div>
      </div>
      <van-pull-refresh
        style="height: calc(100% - 47px)"
        v-model="refreshing"
        @refresh="onRefresh"
      >
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <ul>
            <li v-for="(item, i) in state.list" :key="i">
              <div class="column-first">{{ item.name }}</div>
              <div class="column-second">{{ item.certEndDate }}</div>
              <div class="column-third">
                <van-button
                  color="#4375E4"
                  round
                  type="primary"
                  @click="toDetail(item)"
                >
                  详情
                </van-button>
              </div>
            </li>
          </ul>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-overlay
      :show="isSearchPop"
      @click.stop="isSearchPop = false"
      z-index="9"
    >
      <van-search
        shape="round"
        @click.stop
        @search="search"
        clearable
        autofocus
        background="#4fc08d00"
        v-model="state.form.name"
        placeholder="请输入机构名称"
      />
    </van-overlay>
  </div>
</template>

<script setup>
import { ref, reactive, inject, onBeforeMount } from 'vue'
import { getXJPDListByLevel } from '@/api/xcc.js'
import router from '@/router/index'
import { appCurrentState } from '@/pinia/modules/app.js'

const changeComponents = inject('changeComponents')
const props = defineProps({
  orgStartType: {
    type: [Number, String]
  }
})
const loading = ref(false)
const refreshing = ref(false)
const isSearchPop = ref(false)
const finished = ref(false)
const state = reactive({
  titleObj: {
    1: '一星养老机构',
    2: '二星养老机构',
    3: '三星养老机构',
    4: '四星养老机构',
    5: '五星养老机构'
  },
  list: [],
  form: {
    areaCode: '440000',
    level: ''
  }
})

const back = () => {
  changeComponents('view')
}

const toDetail = item => {
  appCurrentState().SET_CURRENT_ID(item.id)
  router.push('/ylfwss')
}

const search = () => {
  getOrgList()
  isSearchPop.value = false
}

const searchBtn = () => {
  isSearchPop.value = true
}

const getOrgList = async () => {
  if (refreshing.value) {
    state.list = []
    refreshing.value = false
  }
  state.form.level = props.orgStartType
  let res = await getXJPDListByLevel(state.form)
  if (res.succeed) {
    loading.value = false
    state.list = res.data
    finished.value = true
  }
}

const onLoad = () => {
  getOrgList()
}

const onRefresh = () => {
  // 清空列表数据
  finished.value = false
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true
  onLoad()
}
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  .list-box {
    height: calc(100% - 100px);
    background-color: #fff;
    // padding: 0px 0px 0px 0px;
    .title-box {
      height: 100px;
      padding: 0 40px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e6e6e6;
      // justify-content: space-between;
      .column-first {
        flex: 2;
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #4375e4;
      }
      .column-second {
        flex: 2;
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #4375e4;
      }
      .column-third {
        text-align: center;
        flex: 1;
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #4375e4;
      }
    }
    ul {
      li {
        height: 100px;
        padding: 0 40px;
        border-bottom: 1px solid #e6e6e6;
        display: flex;
        align-items: center;
        .column-first {
          flex: 2;
          font-size: 30px;
          font-family: PingFang SC;
        }
        .column-second {
          flex: 2;
          font-size: 30px;
          font-family: PingFang SC;
        }
        .column-third {
          text-align: center;
          flex: 1;
          font-size: 30px;
          font-family: PingFang SC;
          :deep(.van-button) {
            width: 120px;
            height: 50px;
          }
        }
      }
    }
  }
}
</style>
